<script setup>
import { ref } from "vue";
import Dialog from "@/components/Dialog.vue";
import AiAnswer from "./AiAnswer.vue";
import { useAiStore } from "@/stores/aiStore";

const props = defineProps(["visible", "title"]);

const emits = defineEmits(["close"]);

const aiDataStore = useAiStore();

// const isFullScreen = ref(false);

const aiAnswerReset = ref(null);
function handleClose() {
  emits("close");
  aiAnswerReset.value.reset();
}

function handleFullClick() {
  // isFullScreen.value = !isFullScreen.value;
  aiDataStore.isFullDialog = !aiDataStore.isFullDialog;
}
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    size="large"
    :isFullScreen="aiDataStore.isFullDialog"
    :destroy-on-close="true"
    @close="handleClose"
  >
    <template #header>
      <div
        :class="aiDataStore.isFullDialog ? 'fullscreenBtn' : 'screenBtn'"
        @click="handleFullClick"
      ></div>
    </template>
    <AiAnswer ref="aiAnswerReset" :isDialog="true"></AiAnswer>
  </Dialog>
</template>

<style lang="less" scoped>
.fullscreenBtn {
  position: absolute;
  right: 65px;
  top: 18px;
  cursor: pointer;
  width: 22px;
  height: 22px;
  background: url(../../../assets/images/restoreSrceen.png) no-repeat;
  background-size: 100% 100%;
}
.screenBtn {
  position: absolute;
  right: 52px;
  top: 10px;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  background: url(@/assets/images/fullSrceen.png) no-repeat;

  background-size: 100% 100%;
}
</style>
